<template>
  <div
    :class="[
      select_node_cla,
      css_wind_light_hover,
      css_child_margin_top,
      css_content_padding,
      css_cursor_pointer,
    ]"
    :id="suffix(select_node_id)"
  >
    <div :class="select_node_view_cla" :id="suffix(select_node_view_id)">
      {{ select_node_tag_empty_view_default_tag }}
    </div>

    <div
      :class="[select_node_content_cla, css_disnone]"
      :id="suffix(select_node_content_id)"
    >
      <div
        :class="[select_node_progress_cla, css_wind_light_hover]"
        :id="suffix(select_node_progress_id)"
      ></div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted, toRaw } from 'vue';

import './select_node.css';

import {
  css_child_margin_top,
  css_content_padding,
  css_wind_light_hover,
  css_disnone,
  css_cursor_pointer,
} from '../../../../global/element/DataDefine/sourceData';

import {
  select_node_cla,
  select_node_content_cla,
  select_node_content_id,
  select_node_id,
  select_node_progress_cla,
  select_node_progress_id,
  select_node_tag_empty_view_default_tag,
  select_node_view_cla,
  select_node_view_id,
} from './DataDefine/sourceData';
import {
  prop_select_node_defprop_suffix,
  select_node_prop,
} from './Classes/cla_select_node_prop';
import { init_select_node } from './select_node';
/**
 * @type {select_node_prop}
 */
let cur_props = defineProps(new select_node_prop());

let to_raw_prop = toRaw(cur_props);

onMounted(() => {
  init_select_node(to_raw_prop);
});

/**
 * 整合 给定 的 后缀 信息 作为 特定 id
 * @param {string} id
 * @returns
 */
function suffix(id) {
  return `${id}_${to_raw_prop[prop_select_node_defprop_suffix]}`;
}
</script>
